<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<title>中国检验认证集团商品溯源平台</title>
<%--  <link href="${pageContext.request.contextPath}/static/css/css.css" rel="stylesheet" type="text/css" />--%>
<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/lightGallery.css" />--%>
	  <link href="${pageContext.request.contextPath}/static/lightGallery-master/dist/css/lightgallery.css" rel="stylesheet">

	  <style type="text/css">
		  body{
			  background-color: #152836
		  }
		  .demo-gallery > ul {
			  margin-bottom: 0;
		  }
		  .demo-gallery > ul > li {
			  float: left;
			  margin-bottom: 15px;
			  margin-right: 20px;
			  width: 200px;
		  }
		  .demo-gallery > ul > li a {
			  border: 3px solid #FFF;
			  border-radius: 3px;
			  display: block;
			  overflow: hidden;
			  position: relative;
			  float: left;
		  }
		  .demo-gallery > ul > li a > img {
			  -webkit-transition: -webkit-transform 0.15s ease 0s;
			  -moz-transition: -moz-transform 0.15s ease 0s;
			  -o-transition: -o-transform 0.15s ease 0s;
			  transition: transform 0.15s ease 0s;
			  -webkit-transform: scale3d(1, 1, 1);
			  transform: scale3d(1, 1, 1);
			  height: 100%;
			  width: 100%;
		  }
		  .demo-gallery > ul > li a:hover > img {
			  -webkit-transform: scale3d(1.1, 1.1, 1.1);
			  transform: scale3d(1.1, 1.1, 1.1);
		  }
		  .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
			  opacity: 1;
		  }
		  .demo-gallery > ul > li a .demo-gallery-poster {
			  background-color: rgba(0, 0, 0, 0.1);
			  bottom: 0;
			  left: 0;
			  position: absolute;
			  right: 0;
			  top: 0;
			  -webkit-transition: background-color 0.15s ease 0s;
			  -o-transition: background-color 0.15s ease 0s;
			  transition: background-color 0.15s ease 0s;
		  }
		  .demo-gallery > ul > li a .demo-gallery-poster > img {
			  left: 50%;
			  margin-left: -10px;
			  margin-top: -10px;
			  opacity: 0;
			  position: absolute;
			  top: 50%;
			  -webkit-transition: opacity 0.3s ease 0s;
			  -o-transition: opacity 0.3s ease 0s;
			  transition: opacity 0.3s ease 0s;
		  }
		  .demo-gallery > ul > li a:hover .demo-gallery-poster {
			  background-color: rgba(0, 0, 0, 0.5);
		  }
		  .demo-gallery .justified-gallery > a > img {
			  -webkit-transition: -webkit-transform 0.15s ease 0s;
			  -moz-transition: -moz-transform 0.15s ease 0s;
			  -o-transition: -o-transform 0.15s ease 0s;
			  transition: transform 0.15s ease 0s;
			  -webkit-transform: scale3d(1, 1, 1);
			  transform: scale3d(1, 1, 1);
			  height: 100%;
			  width: 100%;
		  }
		  .demo-gallery .justified-gallery > a:hover > img {
			  -webkit-transform: scale3d(1.1, 1.1, 1.1);
			  transform: scale3d(1.1, 1.1, 1.1);
		  }
		  .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
			  opacity: 1;
		  }
		  .demo-gallery .justified-gallery > a .demo-gallery-poster {
			  background-color: rgba(0, 0, 0, 0.1);
			  bottom: 0;
			  left: 0;
			  position: absolute;
			  right: 0;
			  top: 0;
			  -webkit-transition: background-color 0.15s ease 0s;
			  -o-transition: background-color 0.15s ease 0s;
			  transition: background-color 0.15s ease 0s;
		  }
		  .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
			  left: 50%;
			  margin-left: -10px;
			  margin-top: -10px;
			  opacity: 0;
			  position: absolute;
			  top: 50%;
			  -webkit-transition: opacity 0.3s ease 0s;
			  -o-transition: opacity 0.3s ease 0s;
			  transition: opacity 0.3s ease 0s;
		  }
		  .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
			  background-color: rgba(0, 0, 0, 0.5);
		  }
		  .demo-gallery .video .demo-gallery-poster img {
			  height: 48px;
			  margin-left: -24px;
			  margin-top: -24px;
			  opacity: 0.8;
			  width: 48px;
		  }
		  .demo-gallery.dark > ul > li a {
			  border: 3px solid #04070a;
		  }
		  .home .demo-gallery {
			  padding-bottom: 80px;
		  }
	  </style>
	  <style type="text/css">
		  * { margin: 0; padding: 0; list-style-type: none; }
		  a, img { border: 0; }
		  body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; }
		  /* gallery */
		  .gallery { width: 214px; margin: 0px auto; }
		  .gallery li { display: block; float: left; height: 100px; margin-bottom: 6px; margin-right: 6px; width: 100px; }
		  .gallery li a { height: 100px; width: 100px; }
		  .gallery li a img { max-width: 100px; }
	  </style>
  </head>

  <div id="head"></div>
  <body>
  <div id="info_main">
	  <!------------------------------------------------------------------------------------>
	  <div style="width: 100%;height: 1500px;overflow-y: scroll";padding-bottom:230px;>
	  <ul id="lightgallery" class="list-unstyled row">
		<c:if test="${markItem.zhengimgshow==1&&markItem.zhengimg != null && markItem.zhengimg != ''}">
		  <li style="display:inline;" class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="${pageContext.request.contextPath}/showImage/${markItem.id}/zm.sv" data-sub-html="<h4>正面</h2>">
			  <div id="zheng_title">正面照</div>
			  <div id="zheng"><img src="${pageContext.request.contextPath}/showImage/${markItem.id}/zm.sv" width="70%" height="80%" /></div>
		  </li>
		</c:if>

		  <c:if test="${markItem.fanimgshow==1&&markItem.fanimg != null && markItem.fanimg != ''}">
			  <li style="display:inline;" class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="${pageContext.request.contextPath}/showImage/${markItem.id}/fm.sv" data-sub-html="<h4>反面</h2>">
				  <div id="zheng_title">反面照</div>
				  <div id="zheng"><img src="${pageContext.request.contextPath}/showImage/${markItem.id}/fm.sv" width="70%" height="80%" /></div>
			  </li>
		  </c:if>

		  <c:if test="${markItem.caizhiimgshow==1&&markItem.caizhiimg != null && markItem.caizhiimg != ''}">
			  <li style="display:inline;" class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="${pageContext.request.contextPath}/showImage/${markItem.id}/cz.sv" data-sub-html="<h4>材质</h2>">
				  <div id="zheng_title">材质</div>
				  <div id="zheng"><img src="${pageContext.request.contextPath}/showImage/${markItem.id}/cz.sv" width="70%" height="80%" /></div>
			  </li>
		  </c:if>

		  <c:if test="${markItem.biaoqianimgshow==1&&markItem.biaoqianimg != null && markItem.biaoqianimg != ''}">
			  <li style="display:inline;" class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="${pageContext.request.contextPath}/showImage/${markItem.id}/bq.sv" data-sub-html="<h4>标签</h2>">
				  <div id="zheng_title">标签</div>
				  <div id="zheng"><img src="${pageContext.request.contextPath}/showImage/${markItem.id}/bq.sv" width="70%" height="80%" /></div>
			  </li>
		  </c:if>

		  <c:if test="${markItem.otherimgshow==1&&markItem.otherimg != null && markItem.otherimg != ''}">
			  <li style="display:inline;" class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="${pageContext.request.contextPath}/showImage/${markItem.id}/qt.sv" data-sub-html="<h4>其他</h2>">
				  <div id="zheng_title">其他</div>
				  <div id="zheng"><img src="${pageContext.request.contextPath}/showImage/${markItem.id}/qt.sv" width="70%" height="80%" /></div>
			  </li>
		  </c:if>
	  </ul>
	  </div>


	  <!------------------------------------------------------------------------------------>

  </div>
  </body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#lightgallery').lightGallery();
    });
</script>
<script src="${pageContext.request.contextPath}/static/share/jquery-1.8.3.min.js"></script>
<%--<script src="${pageContext.request.contextPath}/static/jquery.mobile-1.3.2.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lightgallery.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-fullscreen.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-thumbnail.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-video.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-autoplay.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-zoom.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-hash.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/dist/js/lg-pager.js"></script>
<script src="${pageContext.request.contextPath}/static/lightGallery-master/lib/jquery.mousewheel.min.js"></script>

